body,html{
	width:100% ;
	height: 100%;
	
}
*{
	margin: 0;
	padding: 0;
}
ul li{
	list-style: none;
}
#main{
	width: 100%;
	height: 100%;
}
#loading{
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
}
#loading ul{ 
	position:absolute; 
	left:47%; 
	top:40%; 
	width:1.2rem; 
	margin-left:-45px;
	}
#loading ul li{
	width:0.05rem;
	height:0.4rem; 
	margin-right:0.1rem; 
	background:#0F0; 
	float:left; 
	animation: 2s linear load infinite;
	
}
@keyframes load{
	0%{transform: scaleY(1);}
	50%{transform: scaleY(0.2);}
	100{transform: scaleY(1);}
}
#loading ul li:nth-of-type(1){ animation-delay:0s;}
#loading ul li:nth-of-type(2){ animation-delay:-0.2s;}
#loading ul li:nth-of-type(3){ animation-delay:-0.4s;}
#loading ul li:nth-of-type(4){ animation-delay:-0.6s;}
#loading ul li:nth-of-type(5){ animation-delay:-0.8s;}
#loading ul li:nth-of-type(6){ animation-delay:-1;}

#loading div{ 
	font-size:0.3rem; 
	color:#00FF00; 
	width:100%;
	position: absolute;
	text-align: center;
	top: 50%;
	
	

	}
/*@keyframes scale{
	from{transform: scale(0.75);}
	to{transform: scale(1);}
}*/
/*.swiper-wrapper .swiper-slide-active{
	animation:scale 2s linear forwards;
	
}*/
.swiper-container 
{
        width: 100%;
        height: 100%;
    }
.swiper-wrapper .swiper-slide-active .t1 .li1Child li:nth-of-type(1){
    	animation: child1 1s linear forwards;
    		 
    }
.swiper-wrapper .swiper-slide-active .t1 .li1Child li:nth-of-type(2){
    	animation: child2 1s linear forwards;
    		 
    }
.swiper-wrapper .swiper-slide-active .t1 .li1Child li:nth-of-type(3){
    	animation: child1 1s linear forwards;
    		 
    }
.swiper-wrapper .swiper-slide-active .t1 .li1Child li:nth-of-type(4){
    	animation: child2 1s linear forwards;
    		 
    }
.li2Child li.active{ left:50%; top:50%}  
    .swiper-slide {
    	height: 100%;
    	width: 100%;
        text-align: center;
        font-size: 18px;
        background: #fff;       
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        
    }
 .swiper-slide>div{
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	top: 0;
 	left: 0;
 	overflow: hidden;
 		  
 }
 
 #cv{ 
 	width:100%; 
 	height:100%; 
	position:absolute; 
 	left:0; 
 	top:0; 
 	z-index: 5;
 }

.t1 .li1Child {
    font-size: 30px;
    color: #FFFFFF;
    position: absolute;
    left: 20%;
    top: 65%;
    text-align: left;
    }
 @keyframes child1{
	0%{ transform:translate(-2rem);}
	
	100%{ transform:translate(0);}
}
 @keyframes child2{
	0%{ transform:translate(2rem);}
	
	100%{ transform:translate(0);}
}
/*第二个动画*/
@keyframes child3{
	0%{;
		transform: rotate(0deg);
		left: 50%;		
		top: 50%;
	}
	100%{
		transform: rotate(720deg);	
		left:50%;	
		top:30%;
	}
	}
/*第三个动画*/
@keyframes child4{
	0%{;
		transform: rotate(0deg);
		left:50% ;		
		top: 50%;
	}
	100%{
		transform: rotate(720deg);		
		left:20%; 
		top:40%;
	}
	}
/*第四个动画*/
@keyframes child5{
	0%{;
		transform: rotate(0deg);
		left:50% ;		
		top: 50%;
	}
	100%{
		transform: rotate(720deg);		
		left:80%;
		top:40%;
	}
	}
/*第五个动画*/
@keyframes child6{
	0%{;
		transform: rotate(0deg);
		left:50% ;		
		top: 50%;
	}
	100%{
		transform: rotate(720deg);		
		left:20%;
	 	top:60%;
	}
	}
/*第六个动画*/
@keyframes child7{
	0%{;
		transform: rotate(0deg);
		left:50% ;		
		top: 50%;
	}
	100%{
		transform: rotate(720deg);		
		left:80%;
	 	top:60%;
	}
	}
/*第七个动画*/
@keyframes child8{
	0%{;
		transform: rotate(0deg);
		left:50% ;		
		top: 50%;
	}
	100%{
		transform: rotate(720deg);		
		left:50%; 
		top:75%;
	}
	}
@keyframes child9{
	
	100%{
		transform: rotateY(720deg);
		
	}
}
.swiper-wrapper .swiper-slide-active .t2 .li2Child li:nth-of-type(1){
    	animation: child3 1s linear forwards;    		 
    }
.swiper-wrapper .swiper-slide-active .t2 .li2Child li:nth-of-type(2){
    	animation: child4 1s linear forwards;    		 
    }
.swiper-wrapper .swiper-slide-active .t2 .li2Child li:nth-of-type(3){
    	animation: child5 1s linear forwards;    		 
    }
.swiper-wrapper .swiper-slide-active .t2 .li2Child li:nth-of-type(4){
    	animation: child6 1s linear forwards;    		 
    }				
.swiper-wrapper .swiper-slide-active .t2 .li2Child li:nth-of-type(5){
    	animation: child7 1s linear forwards;    		 
    }
.swiper-wrapper .swiper-slide-active .t2 .li2Child li:nth-of-type(6){
    	animation: child8 1s linear forwards;    		 
    }
/**/

.li2Child li{ 
	width:90px; 
	height:90px; 
	position:absolute; 
	margin-left:-45px;
	}
.li2Child li:nth-of-type(1){ 
	background:url(../img/c1.png) no-repeat; 

	}
.li2Child li:nth-of-type(2){ 
	background:url(../img/c2.png) no-repeat; 

	}
.li2Child li:nth-of-type(3){ 
	background:url(../img/c3.png) no-repeat; 

	 }
.li2Child li:nth-of-type(4){ 
	background:url(../img/c4.png) no-repeat; 

	 }
.li2Child li:nth-of-type(5){ 
	background:url(../img/c5.png) no-repeat; 

	 }
.li2Child li:nth-of-type(6){ 
	background:url(../img/c6.png) no-repeat; 

	}
.li3Child{ 
	width:4.6rem; 
	height:2.22rem; 
	background:url(../img/d1.png) no-repeat; 
	position:absolute; 
	left:15%; 
	/*margin-left:-2.3rem; */
	bottom:20%;
	}
.li4Child li{
	text-align: left;
	font-size: 0.22rem;
	color: #FFFFFF;
	word-break: break-word;
	border: 0.02rem #FFFFFF solid;
	box-shadow: 0 0 0.15rem #FFFFFF;
	padding: 0.05rem;
	box-sizing: border-box;
	border-radius: 0.05rem;
	position: absolute;
	overflow: hidden;	
}
.li4Child li:nth-of-type(1){
	 	 
	  left:4%; 
	  top:14%;
}
@keyframes child10{
	from{width: 0;
	height: 0;}
	to{
	  width:2rem;
	  height:2.6rem;
	}
}
@keyframes child11{
	from{
		width: 0;
		height: 0;}
	to{
		width:2.8rem;
	  	height:1.6rem; 
	}
}
@keyframes child12{
	from{width: 0;
	height: 0;}
	to{
		width:1.1rem;
	  height:2.9rem; 
	}
}
.li4Child li:nth-of-type(2){
	  width:2.8rem;
	  height:1.6rem; 
	  left:50%; 
	  top:18%
}
.li4Child li:nth-of-type(3){
	 width:1.1rem;
	  height:2.9rem; 
	  left:76%;
	   top:39%;
}
.swiper-wrapper .swiper-slide-active .li4Child li:nth-of-type(1){
	animation: child10 1s linear forwards;
}
.swiper-wrapper .swiper-slide-active .li4Child li:nth-of-type(2){
	animation: child11 1s linear forwards;
}
.swiper-wrapper .swiper-slide-active .li4Child li:nth-of-type(3){
	animation: child12 1s linear forwards;
}
.swiper-wrapper .swiper-slide-active .t3 .li3Child{
    	animation: child9 1s forwards;    		 
    }
#arrow{ 
	width:90px; 
	height:52px; 
	background:url(../img/arr.png) no-repeat; 
	position:absolute; 
	left:50%; 
	bottom:15px; 
	margin-left:-45px; 
	z-index:4; 
	animation:1s infinite arrowMove;}
@keyframes arrowMove{
	0%{ opacity:0; transform:translate(0,0);}
	50%{ opacity:1; transform:translate(0,-30px);}
	100%{ opacity:0; transform:translate(0,-50px);}
}
#music{ 
	width:70px; 
	height:70px; 
	background:url(../img/music.png) no-repeat; 	background-size:cover; 
	position:absolute; 
	top:0.2rem; 
	right:0.2rem; 
	z-index:4;
	}
#music.active{ 
	animation:1s linear infinite musicMove; 
	-webkit-animation:1s linear infinite musicMove;
	}
@keyframes musicMove{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg);}
}
@-webkit-keyframes musicMove{
	0%{ -webkit-transform:rotate(0);}
	100%{ -webkit-transform:rotate(360deg);}
}






